<template>
  <div>
    <div id="video" class="video" style="width:100%;"></div>
    <div
      id="consols"
      ref="consols"
      style="width:100%;height:200px;background:#ffffff;overflow:auto;"
    ></div>
    <div>
      <input type="text" id="url" name="url" v-model="playurl" style="width:100%;" />
      <button @click="play">播放</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playurl:
        "https://xigua-cdn.haima-zuida.com/20200826/10580_c798b8be/index.m3u8",
    };
  },
  mounted() {
    window.videoObject = {
      playerID: "ckplayer01",
      loaded: "loadedHandler",
      container: "#video", // 容器的ID或className
      variable: "player", // 播放函数名称 与下面一致
      volume: 0.1,
      autoplay: true, // 是否自动播放
      live: false, // 是否是直播视频 true = 直播，false = 点播
      mobileCkControls: false, // 是否在移动端（包括ios）环境中显示控制
      video: '', // hls地址
      //debug:true
    };
    window.newVideo=function(url){
        if(window.player!=undefined){
            window.player.newVideo({autoplay:true,video:url})
        }
    }
    window.playurl = this.playurl;
    window.videoObject.video= window.playurl;
    this.init();
  },
  methods: {
    play(){
        window.newVideo(this.playurl);
    },
    init() {
      window.player = new ckplayer(window.videoObject);

      window.loadedHandler = function () {
        //console.log("加载监听");
        console.log(window.playurl);
        //已正确监听到播放器加载
        window.player.addListener("duration", durationHandler); //监听总时长
        window.player.addListener("time", timeHandler); //监听当前播放时间
        window.player.addListener("play", playHandler); //监听播放状态
        window.player.addListener("buffer", bufferHandler); //监听缓冲状态
        window.player.addListener("ended", endHandler); //监听是否播放完成
        window.player.addListener("loadTime", loadtimeHandler);
      };
      window.durationHandler = function (v) {
        window.document.getElementById("consols").innerHTML =
          "1-总时长" + v + "<br />";
      };
      function durationHandler(v) {
        window.durationHandler(v);
      }
      window.playHandler = function () {
        window.document.getElementById("consols").innerHTML =
          "1-正在播放<br/>";
      };
      function playHandler() {
        window.playHandler();
      }
      window.timeHandler = function (v) {
        window.document.getElementById("consols").innerHTML =
          "1-当前时间:" + v + "<br/>";
      };
      function timeHandler(v) {
        window.timeHandler(v);
      }
      window.bufferHandler = function (v) {
        window.document.getElementById("consols").innerHTML =
          "1-当前缓冲:" + v + "<br/>";
      };
      function bufferHandler(v) {
        window.bufferHandler(v);
      }
      window.endHandler = function () {
        window.document.getElementById("consols").innerHTML =
          "1-播放结束:<br/>";
      };
      function endHandler() {
        window.endHandler();
      }
      window.loadtimeHandler = function (v) {
        //window.document.getElementById("consols").innerHTML =
        //  "1-已加载时间:" + v + "<br/>";
      };
      function loadtimeHandler(v) {
        window.loadtimeHandler(v);
      }
    },
  },
};
</script>